<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文件 - 风行融媒体</title>
  <link rel="stylesheet" href="../styles/background.css">
  <link rel="stylesheet" href="../styles/titlebar.css">
  <link rel="stylesheet" href="../styles/navbar.css">
  <link rel="stylesheet" href="../styles/file-transfer.css">
</head>
<body>
  <!-- 自定义标题栏 -->
  <div class="custom-titlebar">
    <div class="titlebar-left">
      <div class="titlebar-avatar">
        <img id="titlebarAvatarImg" src="../assets/avatar.png" alt="用户头像">
      </div>
      <div class="titlebar-title" id="titlebarTitle">文件</div>
    </div>
    <div class="titlebar-right">
      <div class="titlebar-controls">
        <button class="titlebar-btn cloud-sync" id="titlebarCloudSync" title="云同步">
          <svg t="1761036139862" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5278" width="19" height="19"><path d="M806.7072 470.528A290.816 290.816 0 0 0 252.16 371.4048a217.5488 217.5488 0 0 0-9.8304 428.1344 149.1456 149.1456 0 0 0 37.0176 4.352h504.4224a167.8336 167.8336 0 0 0 167.7824-167.7824c1.0752-82.7904-62.1056-154.6752-144.896-165.5808z m-44.6464 44.6464a26.2656 26.2656 0 0 0 19.6096 7.6288h4.352a113.3056 113.3056 0 0 1 0 226.6112H280.5248a114.3808 114.3808 0 0 1-26.1632-3.2768 164.1984 164.1984 0 0 1 19.6096-324.6592 27.3408 27.3408 0 0 0 22.9888-17.408 237.3632 237.3632 0 0 1 458.6496 84.992v3.2768c-1.0752 10.9056 1.0752 17.408 6.5536 22.8864z" p-id="5279" fill="#515151"></path><path d="M489.6768 557.6704a23.1936 23.1936 0 0 0-30.72 0l-27.2384 27.2384V458.5472a21.8112 21.8112 0 1 0-43.5712 0v126.3616l-27.2384-27.2384a23.1936 23.1936 0 0 0-30.72 0 21.0432 21.0432 0 0 0 0 30.72l64.256 64.256c1.0752 1.0752 2.2016 1.0752 3.2768 2.2016s2.2016 1.0752 3.2768 2.2016c1.0752 0 2.2016 1.0752 3.2768 1.0752h10.9056c1.0752 0 2.2016-1.0752 3.2768-1.0752a22.784 22.784 0 0 0 6.5536-4.352l64.256-64.256a21.0432 21.0432 0 0 0 0-30.72zM670.72 508.672l-64.4608-64.3072-1.0752-1.0752c-1.0752 0-1.0752-1.0752-2.2016-1.0752s-1.0752-1.0752-2.2016-1.0752-1.0752-1.0752-2.2016-1.0752-1.0752 0-2.2016-1.0752h-13.056c-1.0752 0-1.0752 0-2.2016 1.0752a1.0752 1.0752 0 0 0-1.0752 1.0752c-1.0752 0-1.0752 1.0752-2.2016 1.0752l-1.0752 1.0752c-1.0752 0-1.0752 1.0752-2.2016 1.0752L510.3616 508.672a21.5552 21.5552 0 0 0 30.72 30.72L568.32 512v126.3616a21.8112 21.8112 0 0 0 43.5712 0V512l27.2384 27.2384a21.0432 21.0432 0 0 0 30.72 0 20.48 20.48 0 0 0 1.0752-30.72z" p-id="5280" fill="#515151"></path></svg>
        </button>
        <button class="titlebar-btn minimize" id="titlebarMinimize" title="最小化">
          <span>─</span>
        </button>
        <button class="titlebar-btn maximize" id="titlebarMaximize" title="最大化">
          <span>□</span>
        </button>
        <button class="titlebar-btn close" id="titlebarClose" title="关闭">
          <span>✕</span>
        </button>
      </div>
    </div>
  </div>

  <!-- 侧边导航栏 -->
  <div class="sidebar">
    <div class="sidebar-header">
      <div class="user-avatar">
        <img id="userAvatarImg" src="../assets/avatar.png" alt="用户头像">
      </div>
    </div>
    
    <div class="sidebar-nav">
      <div class="nav-item" data-view="message">
        <div class="nav-icon">
          <img src="../assets/cd01.svg" alt="消息">
        </div>
        <div class="nav-text">消息</div>
      </div>
      <div class="nav-item" data-view="workbench">
        <div class="nav-icon">
          <img src="../assets/cd06.svg" alt="工作台">
        </div>
        <div class="nav-text">工作台</div>
      </div>
      <div class="nav-item" data-view="calendar">
        <div class="nav-icon">
          <img src="../assets/cd02.svg" alt="日历">
        </div>
        <div class="nav-text">日历</div>
      </div>
      <div class="nav-item active" data-view="files">
        <div class="nav-icon">
          <img src="../assets/cd05.svg" alt="文件">
        </div>
        <div class="nav-text">文件</div>
      </div>
    </div>
  </div>

  <!-- 主容器 -->
  <div class="main-container">
    <!-- 文件浏览器区域 -->
    <div class="file-browser-container">
      <!-- 本地文件面板 -->
      <div class="file-panel local-panel">
        <div class="panel-header">
          <h3>📂 本地文件</h3>
          <div class="panel-toolbar">
            <input type="text" class="path-input" id="localPath" readonly>
            <button class="btn-icon" id="localChooseDirBtn" title="选择目录（可切换磁盘）">📁</button>
            <button class="btn-icon" id="localUpBtn" title="上一级">↑</button>
            <button class="btn-icon" id="localRefreshBtn" title="刷新">🔄</button>
            <button class="btn-icon" id="localHomeBtn" title="主目录">🏠</button>
          </div>
        </div>
        <div class="file-list" id="localFileList">
          <div class="file-list-header">
            <span class="col-name">名称</span>
            <span class="col-size">大小</span>
            <span class="col-modified">修改时间</span>
            <span class="col-actions">操作</span>
          </div>
          <div class="file-list-body" id="localFiles"></div>
        </div>
      </div>

      <!-- 远程文件面板 -->
      <div class="file-panel remote-panel">
        <div class="panel-header">
          <h3>☁️ 远程文件</h3>
          <div class="panel-toolbar">
            <input type="text" class="path-input" id="remotePath" readonly>
            <button class="btn-icon" id="remoteUpBtn" title="上一级">↑</button>
            <button class="btn-icon" id="remoteRefreshBtn" title="刷新">🔄</button>
            <button class="btn-icon" id="remoteHomeBtn" title="根目录">🏠</button>
          </div>
        </div>
        <div class="file-list" id="remoteFileList">
          <div class="file-list-header">
            <span class="col-name">名称</span>
            <span class="col-size">大小</span>
            <span class="col-modified">修改时间</span>
            <span class="col-actions">操作</span>
          </div>
          <div class="file-list-body" id="remoteFiles"></div>
        </div>
      </div>
    </div>

    <!-- 传输队列区域 -->
    <div class="transfer-queue-container">
      <div class="queue-header">
        <h3>📤 传输队列</h3>
        <div class="queue-stats">
          <span id="queueStats">总计: 0 | 进行中: 0 | 已完成: 0</span>
        </div>
        <div class="queue-actions">
          <button class="btn-small" id="pauseAllBtn">⏸️ 全部暂停</button>
          <button class="btn-small" id="resumeAllBtn">▶️ 全部继续</button>
          <button class="btn-small" id="cancelAllBtn">⏹️ 全部取消</button>
          <button class="btn-small" id="clearCompletedBtn">🗑️ 清除已完成</button>
        </div>
      </div>
      
      <!-- 传输分类过滤 -->
      <div class="transfer-filter">
        <div class="filter-group">
          <label>类型：</label>
          <div class="filter-tabs" id="typeFilter">
            <button class="filter-tab active" data-type="all">全部</button>
            <button class="filter-tab" data-type="upload"><img src="./assets/upload.svg" alt="上传" style="width: 16px; height: 16px; vertical-align: middle;"> 上传</button>
            <button class="filter-tab" data-type="download"><img src="./assets/dow.svg" alt="下载" style="width: 16px; height: 16px; vertical-align: middle;"> 下载</button>
          </div>
        </div>
        <div class="filter-group">
          <label>状态：</label>
          <div class="filter-tabs" id="statusFilter">
            <button class="filter-tab active" data-status="all">全部</button>
            <button class="filter-tab" data-status="active">🔄 进行中</button>
            <button class="filter-tab" data-status="completed">✅ 已完成</button>
            <button class="filter-tab" data-status="failed">❌ 失败</button>
          </div>
        </div>
      </div>
      
      <div class="transfer-list" id="transferList">
        <!-- 传输任务将动态添加到这里 -->
      </div>
    </div>
  </div>

  <script src="../scripts/titlebar.js"></script>
  <script src="../scripts/navbar.js"></script>
  <script src="../scripts/file-transfer.js"></script>
</body>
</html>
